<template>
  <a-drawer
    :body-style="{ paddingBottom: '80px' }"
    :closable="false"
    :title="submitFlag === 'save' ?'新增号牌种类适配':'编辑号牌种类适配'"
    :visible="visible"
    :width="450"
    @close="onClose"
  >
    <a-form :form="form" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item style="display:none">
            <a-input v-decorator="['id']"/>
          </a-form-item>
          <a-form-item label="号牌种类">
            <a-select
              showSearch
              placeholder="请选择号牌种类"
              v-decorator="['plateCode',{rules: [{ required: true, message: '请选择号牌颜色'}]}]">
              <a-select-option v-for="(action) in dictDataPlateType" :key="action.dictValue" :value="action.dictLabel">
                {{ action.dictLabel }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="号牌颜色">
            <a-select placeholder="请选择号牌颜色" v-decorator="['plateColor',{rules: [{ required: true, message: '请选择号牌颜色'}]}]">
              <a-select-option v-for="(action) in dictDataPlateColor" :key="action.dictLabel">
                {{ action.dictLabel }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="关键字">
            <a-input v-decorator="['keyword']" placeholder="请输入关键字"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="分类正则">
            <a-textarea v-decorator="['sortRegular']" :rows="4" placeholder="在这里输入分类正则..."/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="备注">
            <a-textarea v-decorator="['remark']" :rows="4" placeholder="在这里输入备注..."/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-popconfirm title="真的放弃编辑吗?" @confirm="onClose">
        <a-button :style="{ marginRight: '8px' }">
          取消
        </a-button>
      </a-popconfirm>
      <a-button type="primary" @click="handleSubmit">
        保存
      </a-button>
    </div>
  </a-drawer>
</template>

<script>
import pick from 'lodash.pick'
import { addPlateRule, dictDataList, editPlateRule } from '@/api/system'

export default {
  name: 'PlateSettingModal',
  data () {
    return {
      dictDataPlateType: [],
      dictDataPlateColor: [],
      form: this.$form.createForm(this),
      visible: false,
      mdl: {},
      disabled: false,
      title: '添加字典数据',
      submitFlag: null
    }
  },
  created () {
    this.loadDictDataPlateType()
    this.loadDictDataPlateColor()
  },
  methods: {
    loadDictDataPlateType () {
      dictDataList({ dictType: 'plate_type' }).then(res => {
        this.dictDataPlateType = res.data
      })
    },
    loadDictDataPlateColor () {
      dictDataList({ dictType: 'plate_color' }).then(res => {
        this.dictDataPlateColor = res.data
      })
    },
    add () {
      this.submitFlag = 'save'
      this.form.resetFields()
      this.visible = true
    },
    edit (record) {
      this.submitFlag = 'edit'
      this.mdl = Object.assign({}, record)
      this.visible = true
      this.mdl.plateCode = this.dictDataPlateType.find((i) => i.dictValue === this.mdl.plateCode).dictLabel
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.mdl, 'id', 'plateCode', 'plateColor', 'keyword', 'sortRegular', 'remark'))
      })
    },
    onClose () {
      this.visible = false
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        // 中文转code
        this.dictDataPlateType.forEach(plateType => {
          if (plateType.dictLabel === values.plateCode) {
            values.plateCode = plateType.dictValue
          }
        })
        if (!err) {
          if (this.submitFlag === 'save') {
            addPlateRule(values).then(res => {
              if (res.code === 200) {
                this.$message.success('操作成功')
                this.$emit('ok')
                this.visible = false
              }
            }).catch(res => {
              this.$message.error(((res.response || {}).data || {}).message || res.message)
            })
          } else {
            editPlateRule(values).then(res => {
              if (res.code === 200) {
                this.$message.success('操作成功')
                this.$emit('ok')
                this.visible = false
              }
            }).catch(res => {
              this.$message.error(((res.response || {}).data || {}).message || res.message)
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
